<template>
  <div class="contact-support">
    <!-- 页面标题 -->
    <h1>联系客服</h1>
    <!-- 聊天容器，包含消息列表和输入框 -->
    <div class="chat-container">
      <!-- 消息列表区域，动态展示客服和用户之间的对话 -->
      <div class="messages">
        <!-- 遍历 messages 数组，为每个消息生成一个 div，根据 sender 属性添加不同的 class -->
        <div
          v-for="(message, index) in messages"
          :key="index"
          :class="['message', message.sender]"
        >
          <!-- 显示消息内容 -->
          <p>{{ message.text }}</p>
        </div>
      </div>
      <!-- 输入框和发送按钮区域 -->
      <div class="input-container">
        <!-- 输入框，用于用户输入消息，与 inputMessage 变量绑定 -->
        <el-input
          v-model="inputMessage"
          placeholder="请输入您的问题..."
          
          @keyup.enter.native="sendMessage" 
        />
        <!-- 发送按钮，点击时调用 sendMessage 函数 -->
        <el-button type="primary" @click="sendMessage">发送</el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'; // 引入 Vue 的 ref 函数，用于创建响应式变量
import { ElMessage } from 'element-plus'; // 引入 Element Plus 的 ElMessage 组件，用于显示提示信息

// 模拟客服对话消息，初始包含欢迎语和提示信息
const messages = ref([
  { sender: 'support', text: '您好！欢迎联系在线客服。' },
  { sender: 'support', text: '您可以在这里提问，我们会尽快回复您！' },
]);

// 用户输入的消息，初始为空字符串
const inputMessage = ref('');

// 发送消息的函数
function sendMessage() {
  // 如果输入内容为空，则显示警告信息并返回
  if (!inputMessage.value.trim()) {
    ElMessage.warning('请输入内容！');
    return;
  }

  // 添加用户消息到界面，消息类型为 'user'
  messages.value.push({ sender: 'user', text: inputMessage.value });

  // 模拟客服的自动回复，1 秒后添加回复消息到界面，消息类型为 'support'
  setTimeout(() => {
    const reply = `这是针对 "${inputMessage.value}" 的自动回复，感谢您的反馈！`;
    messages.value.push({ sender: 'support', text: reply });
  }, 1000);

  // 清空输入框
  inputMessage.value = '';
}
</script>

<style scoped>
/* 样式部分，使用 scoped 关键字，确保样式只作用于当前组件 */
.contact-support {
  padding: 20px; /* 内边距 */
  max-width: 600px; /* 最大宽度 */
  margin: 0 auto; /* 居中对齐 */
}

.chat-container {
  border: 1px solid #ccc; /* 边框 */
  border-radius: 10px; /* 边框圆角 */
  padding: 20px; /* 内边距 */
}

.messages {
  max-height: 400px; /* 最大高度 */
  overflow-y: auto; /* 垂直方向滚动条 */
  margin-bottom: 20px; /* 下边距 */
}

.message {
  margin: 10px 0; /* 外边距 */
  padding: 10px; /* 内边距 */
  border-radius: 10px; /* 圆角 */
}

/* 用户消息样式，背景色、文本对齐方式等 */
.message.user {
  background-color: #e6f7ff;
  text-align: right;
}

/* 客服消息样式，背景色、文本对齐方式等 */
.message.support {
  background-color: #f5f5f5;
  text-align: left;
}

.input-container {
  display: flex; /* 弹性布局 */
  gap: 10px; /* 子元素之间的间距 */
}

.input-container input {
  flex: 1; /* 弹性值，占满剩余空间 */
}
</style>